<template>
  <!-- AI智能识别 -->
  <view class="card m16 AI_ID_Card" @click="AI_CardFn">
    <image src="/static/other/AI-shibie.svg" />
    <text>身份证智能识别</text>
  </view>

  <!-- 就诊人表单添写 -->
  <view class="card">
    <view class="form_flex">
      <text>真实姓名</text>
      <input
        type="number"
        v-model="submitPatientData.name"
        placeholder="请输入真实姓名"
        placeholder-class="input_place_style"
      />
    </view>
    <!-- 性别 -->
    <view class="form_flex">
      <text>性别</text>
      <picker
        @change="selectSex"
        mode="selector"
        class="picker_box"
        :range="['男', '女']"
      >
        <view class="picker_place">
          <text>{{
            submitPatientData.sex !== "" ? submitPatientData.sex : "请选择性别"
          }}</text>
          <image class="more" src="/static/other/gengduo.svg" />
        </view>
      </picker>
    </view>

    <!-- 出生日期 -->
    <view class="form_flex">
      <text>出生日期</text>
      <picker @change="selectDate" mode="date" class="picker_box">
        <view class="picker_place">
          <text>{{
            submitPatientData.born !== ""
              ? submitPatientData.born
              : "请选择出生日期"
          }}</text>
          <image class="more" src="/static/other/gengduo.svg" />
        </view>
      </picker>
    </view>
    <!-- 成员关系 -->
    <view class="form_flex">
      <text>成员关系</text>
      <picker
        @change="selectRelation"
        mode="selector"
        class="picker_box"
        :range="PepleRelations"
      >
        <view class="picker_place">
          <text>{{
            submitPatientData.relation !== ""
              ? submitPatientData.relation
              : "请选择与成员关系"
          }}</text>
          <image class="more" src="/static/other/gengduo.svg" />
        </view>
      </picker>
    </view>
    <!-- 身份证 -->
    <view class="form_flex">
      <text>身份证</text>
      <input
        type="idcard"
        v-model="submitPatientData.id_card"
        placeholder="请输入身份证"
        placeholder-class="input_place_style"
      />
    </view>
    <!-- 手机号 -->
    <view class="form_flex">
      <text>手机号</text>
      <input
        type="number"
        v-model="submitPatientData.phone"
        placeholder="请输入手机号"
        placeholder-class="input_place_style"
      />
    </view>
  </view>
  <!-- 占位高度 -->
  <view style="height: 300rpx"></view>
  <!-- footer -->
  <view class="submit_btns">
    <text @click="cancelFn">取消</text>
    <text @click="confirmAdd">确认添加</text>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { addPatientApi } from "@/http/api";
import { AIURL } from "@/http/request";
import { uploadImage } from "@/utils/upload";

//定义成员关系
const PepleRelations = ref(["自己", "父母", "其他"]);

//AI智能识别
const AI_CardFn = async () => {
  //调用上传身份证智能识别接口，会返回身份证信息
  const res: any = await uploadImage(AIURL, "正在识别中...", "识别错误...");
  const result = JSON.parse(res.data).data;
  console.log("身份证识别返回的结果f:", JSON.parse(res.data).data);
  //如果拿到身份证信息再填充给submitPatientData
  submitPatientData.name = result.name;
  submitPatientData.sex = result.sex;
  submitPatientData.born = result.born;
  submitPatientData.id_card = result.id_card;
};

//创建待提交的参数
const submitPatientData = reactive({
  name: "",
  sex: "",
  born: "",
  relation: "",
  id_card: "",
  phone: "",
});

//选择性别
const selectSex = (e: any) => {
  submitPatientData.sex = e.detail.value === "0" ? "男" : "女";
};

//选择出生日期
const selectDate = (e: any) => {
  console.log(e);
  submitPatientData.born = e.detail.value;
};

//选择成员关系
const selectRelation = (e: any) => {
  console.log(e);
  submitPatientData.relation = PepleRelations.value[e.detail.value];
};

//确定提交
const confirmAdd = async () => {
  console.log("提交参数：", submitPatientData);
  //调提交接口
  const res = await addPatientApi(submitPatientData);
  //返回上一个页面
  uni.navigateBack({
    delta: 1,
  });
};

//取消
const cancelFn = () => {
  uni.navigateBack({ delta: 1 });
};
</script>

<style lang="scss">
@import "@/assets/style/public.scss";
@import "@/assets/style/form.scss";
page {
  background: #e4e4e4;
}

.AI_ID_Card {
  display: flex;
  align-items: center;
  image {
    width: 90rpx;
    height: 90rpx;
  }

  text {
    margin-left: 10px;
  }
}
</style>
